/* 	MediaStream
*	Display group
*	
*	IMPORTANT
*
*	
*										*/
var MediaSlider = function( vars )	{

	Object.extend( obj = $$( '.MediaSlider' ).pop(), MediaSlider.proto );
	
	if( vars )	
		obj.vars = vars;
	
	return obj;
}


MediaSlider.proto = {
	
	current		: 1,
	
	init		: function() {
	
		if( this.vars.play == 'auto' && this.vars.delay )			
			this.start();
		
		if( this.vars.types.arrows )
			this.nav_arrows();

		if( this.vars.types.numbers )
			this.nav_numbers();
			
		if( this.vars.effect == 'fader' ) {
			this.select( '.slider-item' ).each( function( e ) { 
				e.setStyle({ position: 'absolute', top: 0, left: 0 });
				e.setOpacity( 0 );
			});
			this.select( '.slider-item' ).first().show().setOpacity( 1 );
		}	
	},
	
	
	start		: function() {
	
		if ( this.timer != null ) {
			clearTimeout( this.timer );
			this.slide_right( 1 );
        }
		this.timer = setTimeout( this.start.bind( this ), this.vars.delay * 1000);

	},
	
	
	activate_controls	: function() {
		
		this.down( '.left' ).show();
		this.down( '.right' ).show();
		this.down( '.numbers' ).show();
	
	},
	
	
	deactivate_controls	: function() {
		
		this.down( '.left' ).hide();
		this.down( '.right' ).hide();
		this.down( '.numbers' ).hide();
	
	},
	
	
	nav_arrows	: function() {
		
		this.down( '.left' ).on( 'click', this.slide_left.bind( this, 1 ));
		this.down( '.right' ).on( 'click', this.slide_right.bind( this, 1 ));
	
	},
	
	
	nav_numbers	: function() {
	
		var total = this.select( '.slider-item' ).size();
		var width = this.down( '.slider-item').getWidth();

		this.select( '.number' ).each( function( el ) {
			el.observe( 'click', function( e ){ 
				
				var elem	= e.element( e );
				var to 		= Number( elem.rel );

				if( to > Number( this.current )) {
					this.slide_right( to - this.current );
				} else if( to < this.current ) {
					this.slide_left( this.current - to );
				} else {
					return false;
				}
				elem.siblings().each( function( elem ) { elem.removeClassName( 'active' )});
				elem.addClassName( 'active' );
								
			}.bind( this ) );
		}, this );
	
	},
	
	
	slide_left	: function( number ) {
	
		var total = this.select( '.slider-item' ).size();
		var width = this.down( '.slider-item').getWidth();
		var move  = ((( this.current - 1 ) * width *  -1 ) + ( number * width ));
		var numbers = this.select( '.number' );
		var items = this.select( '.slider-item' );
		
		if( this.current <= 1 )
			move  = ( total - 1 ) * width * -1;
		
		if( this.vars.effect == 'slider' )
			new Effect.Move( this.down( '.slider-ul' ), { x: move, y: 0, mode: 'absolute', duration: this.vars.duration });
		
		if( this.vars.effect == 'fader' ) {
			console.log( (( this.current - 1 < 0 ) ? total - 1 : this.current - 1 ) );
			console.log((( this.current - number <= 0 ) ? total - number : this.current - number - 1 ));
			new Effect.Opacity( items[ (( this.current - 1 < 0 ) ? total - 1 : this.current - 1 ) ], { from: 1, to: 0, duration: this.vars.duration  });	
			new Effect.Opacity( items[ (( this.current - number <= 0 ) ? total - number : this.current - number - 1 ) ], { from: 0, to: 1, duration: this.vars.duration });	
		}
			
		if( !this.vars.effect )
			this.down( '.slider-ul' ).setStyle({ left: move + 'px' });
		
		this.current = this.current - number;
		if( this.current <= 0 )
			this.current = total;
		
		if( numbers[ this.current ] ) {			
			numbers[ this.current - 1 ].siblings().each( function( elem ) { elem.removeClassName( 'active' )});
			numbers[ this.current - 1 ].addClassName( 'active' );	
		}
	},
	
	slide_right	: function( number ) {
		
		var total = this.select( '.slider-item' ).size();
		var width = this.down( '.slider-item').getWidth();
		var move  = (( this.current - 1 ) + number ) * width * -1;
		var numbers = this.select( '.number' );
		var items = this.select( '.slider-item' );
		
		if( this.current >= total ) 
			move  = total * width * -1 ;
		
		
		if( this.vars.effect == 'slider' )
			new Effect.Move( this.down( '.slider-ul' ), { x: move, y: 0, mode: 'absolute', duration: this.vars.duration });
		
		if( this.vars.effect == 'fader' ) {
			
			new Effect.Opacity( items[ (( this.current == 0 ) ? total - 1 : this.current - 1 ) ], { from: 1, to: 0, duration: this.vars.duration });	
			new Effect.Opacity( items[ this.current + number - 1 ], { from: 0, to: 1, duration: this.vars.duration });	
		}

		if( !this.vars.effect )
			this.down( '.slider-ul' ).setStyle({ left: move + 'px' });
		
		if( numbers[ this.current ] ) {
			numbers[ this.current ].siblings().each( function( elem ) { elem.removeClassName( 'active' )});
			numbers[ this.current ].addClassName( 'active' );
		}
		
		this.current = this.current + number;
		if( this.current >= total )
			this.current = 0;
		
	}
	
}